import { Button, Dropdown, DropdownRef, Radio, Space } from "antd-mobile";
import classnames from "classnames";
import { FC, useMemo, useRef } from "react";
import style from "./index.scss";

interface IProps {
  districts: IDistrict[];
  districtId: number;
  ticketFlag: string;
  onDistrictChange: (id: number) => void;
  onTicketFlagChange: (value: string) => void;
}

const CinemasHeader: FC<IProps> = ({
  districts,
  districtId,
  ticketFlag,
  onDistrictChange,
  onTicketFlagChange,
}) => {
  // dropDownRef
  const dropDownRef = useRef<DropdownRef>(null);

  // 基于 districtId 计算出 districtName 用于
  const districtName = useMemo(() => {
    return districts.find((item) => item.districtId === districtId)
      ?.districtName;
  }, [districts, districtId]);

  const ticketFlagName = ["App订票", "前台兑换"][+ticketFlag - 1];

  return (
    <Dropdown ref={dropDownRef}>
      <Dropdown.Item key="cityId" title={districtName}>
        <div className={style.box1}>
          {districts.map((item) => {
            return (
              <Button
                className={classnames([
                  style.button,
                  { [style.buttonActive]: item.districtId === districtId },
                ])}
                key={item.districtId}
                onClick={() => {
                  // 关闭下拉菜单
                  dropDownRef.current?.close();

                  // 调用父组件的方法
                  onDistrictChange(item.districtId);
                }}
              >
                {item.districtName}
              </Button>
            );
          })}
        </div>
      </Dropdown.Item>
      <Dropdown.Item key="type" title={ticketFlagName}>
        <div className={style.box2}>
          <Radio.Group
            defaultValue={ticketFlag}
            onChange={(value: any) => {
              // console.log("value", value);

              // 关闭 下拉菜单
              dropDownRef.current?.close();

              // 调用父组件的方法
              onTicketFlagChange(value);
            }}
          >
            <Space direction="vertical">
              <Radio value="1">App订票</Radio>
              <Radio value="2">前台兑换</Radio>
            </Space>
          </Radio.Group>
        </div>
      </Dropdown.Item>
      <Dropdown.Item key="hello" title="最近去过"></Dropdown.Item>
    </Dropdown>
  );
};

export default CinemasHeader;
